<template>
  <div class="login-container">
    <div class="login_page">
      <div class="loginbox">
        <h1 class="loginword">LOGIN</h1>
        <div class="login_input">
          <input type="text" v-model="username" required class="input-field" placeholder="请输入用户名">
        </div>
        <div class="login_input">
          <input type="password" v-model="password" required class="input-field" placeholder="请输入密码">
        </div>
        <div class="login_button">
          <button type="submit" class="login-button" @click="login">登录</button>
          <button @click="enroll">注册</button>
        </div>
        <p v-if="error" class="error-message">{{ error }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      error: '',
    };
  },
  methods: {
    login() {
      axios.post('http://localhost:3000/api/login', {
        username: this.username,
        password: this.password,
      })
        .then(response => {
          console.log(response.data);
          // 处理登录成功的逻辑，例如跳转到其他页面
          this.$router.push('/HelloWorld');
        })
        .catch(error => {
          console.error(error.response.data);
          if (error.response.data.message === '用户未注册') {
            // 未注册
            this.error = '用户未注册';
          } else if (error.response.data.message === '密码错误') {
            // 密码错误
            this.error = '密码错误，请重新输入';
          } else {
            // 其他错误情况
            this.error = '登录失败，请重试';
          }
        });
    },
    enroll(){
      this.$router.push("/Register");
    }
  },
};
</script>

<style scoped>
.login-container{
  width: 100%;
  height: 100%;
}
.login_page {
  width: 100%;
  height: 100%;
  background-image: url('https://pic4.zhimg.com/v2-dd29db5ca85807bc06592c9f0fb8c147_r.jpg?source=172ae18b');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginbox {
  width: 25%;
  height: 50%;
  background-color: #00000060;
  border-radius: 20px;
  text-align: center;
}

.loginword {
  color: #ffffff90;
  margin-top: 8%;
}

.login_input {
  margin-top: 5%;
}

.login_input input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

.login_button {
  width: 95%;
  height: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 3%;
}

.login_button button {
  width: 30%;
  height: 15%;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #2f57a1);
}

.register_page {
  width: 100%;
  height: 100%;
  background-image: url('https://pic4.zhimg.com/v2-dd29db5ca85807bc06592c9f0fb8c147_r.jpg?source=172ae18b');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.registerbox {
  text-align: center;
}

.registerbox h1 {
  color: #fff;
}

.registerbox button {
  margin-top: 5%;
  width: 40%;
  height: 15%;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #2f57a1);
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>